@extends('Home.Index.index')
@section('title')
    收货地址
@endsection

@section('content')
<section id="main">
        <div class="container_12">
            <div id="sidebar" class="grid_3">
                <aside id="categories_nav">
                    <h3>用户中心</h3>

                    <nav class="left_menu">
                        <ul>
                            <li><a href="{{url('/user_info/')}}">个人信息</a></li>
                            <li><a href="{{url('/user_address/')}}">收货地址管理</a></li>
                            <li><a href="{{url('/user_address_list/')}}">我的收货地址</a></li>
                            <li><a href="{{url('/user_order/')}}">我的订单</a></li>
                        </ul>
                    </nav><!-- .left_menu -->
                </aside><!-- #categories_nav -->

                {{--<aside id="manufacturers">--}}

                {{--</aside><!-- #categories_nav -->--}}

                {{--<aside id="tags">--}}

                {{--</aside><!-- #tags -->--}}

                {{--<aside id="newsletter_signup">--}}

                {{--</aside><!-- #newsletter_signup -->--}}

            </div><!-- .sidebar -->
            <div id="content" class="grid_9">
                <h1 class="page_title">欢迎来到用户中心</h1>
                <br>
                <article class="post">
                    {{--这里写用户信息列表--}}
                    <form action="" method="post">
                        <p>
                            <label>收货地址：</label>
                        <form action="#">
                            <label for="addr-show">您选择的是：
                                <input type="text" value="" name="address" id="addr-show">
                            </label>
                            <br/>

                            <!--省份选择-->
                            <select id="prov" onchange="showCity(this)">
                                <option>=请选择省份=</option>

                            </select>

                            <!--城市选择-->
                            <select id="city" onchange="showCountry(this)">
                                <option>=请选择城市=</option>
                            </select>

                            <!--县区选择-->
                            <select id="country" onchange="selecCountry(this)">
                                <option>=请选择县区=</option>
                            </select>
                            <button type="button" class="btn met1" onClick="showAddr()">确定</button>
                        </form>
                        </p>
                        <p>
                            <label>详细收货地址：</label>
                            <input id="address-info" name="address_info" type="text" >
                        </p>
                        <p>
                            <label>收货人姓名：</label>
                            <input id="nickname" type="text" name="nickname">
                        </p>
                        <p>
                            <label>手机号码：</label>
                            <input id="mobile" name="mobile" type="text" >
                        </p>
                        <p>
                            <label>邮编：</label>
                            <input id="postcode" name="postcode" type="text">
                        </p>
                        <div class="submit">
                            <button type="button" class="btn met1" id="user_address_save">保存</button>
                        </div>
                    </form>
                </article>
            </div>
        </div><!-- .container_12 -->
    </section><!-- #main -->

    <div class="clear"></div>

    {{--用户信息表单的js文件--}}
    <script type="application/javascript">
        var btn = document.getElementById('user_address_save');
        btn.onclick=function () {
            //选择的收货地址
            var address = document.getElementById('addr-show').value;
            //收货人姓名
            var nickname = document.getElementById('nickname').value;
            //详细收货地址
            var address_info = document.getElementById('address-info').value;
            //收货人手机号
            var mobile = document.getElementById('mobile').value;
            //邮编
            var postcode = document.getElementById('postcode').value;

            //发送ajax请求
            var xhr = new XMLHttpRequest();
            xhr.open('POST','{{url('/user_address/')}}',false);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            var postData = {address:address,nickname:nickname,address_info:address_info,mobile:mobile,postcode:postcode};
            var json_postData = JSON.stringify(postData);
            xhr.send(json_postData);
            console.log(xhr.responseText);
            if(eval("("+xhr.responseText+")").status)
            {
                layer.msg(eval("("+xhr.responseText+")").info,{icon:6},function () {
                    window.location.reload();
                });
            }else {
                layer.msg(eval("("+xhr.responseText+")").info,{icon:5});
            }

        };

    </script>

    {{--省市县三级联动js--}}
    <script type="application/javascript">
        function $(str) {
            return document.getElementById(str);
        }
        var addrShow = $('addr-show');
        var btn = document.getElementsByClassName('met1')[0];
        var prov = $('prov');
        var city = $('city');
        var country = $('country');
        /*用于保存当前所选的省市区*/
        var current = {
            prov: '',
            city: '',
            country: ''
        };
        /*自动加载省份列表*/
        (function showProv() {
            btn.disabled = true;
            var len = provice.length;
            for (var i = 0; i < len; i++) {
                var provOpt = document.createElement('option');
                provOpt.innerText = provice[i]['name'];
                provOpt.value = i;
                prov.appendChild(provOpt);
            }
        })();
        /*根据所选的省份来显示城市列表*/
        function showCity(obj) {
            var val = obj.options[obj.selectedIndex].value;
            if (val != current.prov) {
                current.prov = val;
                addrShow.value = '';
                btn.disabled = true;
            }
//console.log(val);
            if (val != null) {
                city.length = 1;
                var cityLen = provice[val]["city"].length;
                for (var j = 0; j < cityLen; j++) {
                    var cityOpt = document.createElement('option');
                    cityOpt.innerText = provice[val]["city"][j].name;
                    cityOpt.value = j;
                    city.appendChild(cityOpt);
                }
            }
        }
        /*根据所选的城市来显示县区列表*/
        function showCountry(obj) {
            var val = obj.options[obj.selectedIndex].value;
            current.city = val;
            if (val != null) {
                country.length = 1; //清空之前的内容只留第一个默认选项
                var countryLen = provice[current.prov]["city"][val].districtAndCounty.length;
                if(countryLen == 0){
                    addrShow.value = provice[current.prov].name + '-' + provice[current.prov]["city"][current.city].name;
                    return;
                }
                for (var n = 0; n < countryLen; n++) {
                    var countryOpt = document.createElement('option');
                    countryOpt.innerText = provice[current.prov]["city"][val].districtAndCounty[n];
                    countryOpt.value = n;
                    country.appendChild(countryOpt);
                }
            }
        }
        /*选择县区之后的处理函数*/
        function selecCountry(obj) {
            current.country = obj.options[obj.selectedIndex].value;
            if ((current.city != null) && (current.country != null)) {
                btn.disabled = false;
            }
        }

        /*点击确定按钮显示用户所选的地址*/
        function showAddr() {
            addrShow.value = provice[current.prov].name + '-' + provice[current.prov]["city"][current.city].name + '-' + provice[current.prov]["city"][current.city].districtAndCounty[current.country];
        }
    </script>


@endsection